<template>
    <div class="coach-page page">
        <div class="content">
            <PlatformCrumb back="返回" style="margin-top: 0;">
            </PlatformCrumb>
            <el-form size="medium" class="medium">
                <el-form-item label="请选择课程类型">
                    <br>
                    <el-select v-model="detailForm.courseType" placeholder="请选择">
                        <el-option
                                v-for="item in optionsKC"
                                :key="item.dictNo"
                                :label="item.dictName"
                                :value="item.dictNo">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排课">
                    <br>
                    <el-select v-model="detailForm.grouping" placeholder="请选择">
                        <el-option
                                v-for="item in optionsFZ"
                                :key="item.dictNo"
                                :label="item.dictName"
                                :value="item.dictNo">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程名称">
                    <el-input v-model="detailForm.name"></el-input>
                </el-form-item>

                <el-form-item label="地点">
                    <el-input v-model="detailForm.address"></el-input>
                </el-form-item>

                <el-form-item label="课程配图" prop="nikename">
                    <br>
                    <div class="uploadimg2">
                        <img v-if="detailForm.imgs" :src="detailForm.imgs|filtersImg" alt="">
                        <el-upload
                                ref='upload'
                                :action='imgupload'
                                accept="image/jpeg,image/gif,image/png"
                                list-type="picture-card"
                                :show-file-list="false"
                                name="file"
                                :on-success="handleAvatarSuccess"
                        >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </div>
                </el-form-item>
                <el-form-item label="上传视频" prop="nikename">
                    <br>
                    <div class="hezuohb">
                        <video
                                v-if="detailForm.video"
                                style="width:500px; margin-right: 20px"
                                :src="detailForm.video|filtersImg"
                                controls>
                        </video>
                        <el-upload
                                class="avatar-uploader mr10"
                                :action="videoupload"
                                :show-file-list="false"
                                list-type="picture-card"
                                :on-success="handleVideoSuccess"
                        >

                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <!--                                <p v-if="data.infoVideo">{{data.infoVideo}}</p>-->
                    </div>
                </el-form-item>
                <el-form-item label="上传教案" prop="nikename">
                    <br>
                    <div class="hezuohb">
                        <el-upload
                                class="avatar-uploader mr10"
                                :action="fileupload"
                                :show-file-list="false"
                                list-type="picture-card"
                                :on-success="handleVideoSuccess2"
                        >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <p class="ml30" v-if="detailForm.plan">
                            教案地址： {{detailForm.plan|filtersImg}}
                        </p>
                    </div>
                </el-form-item>

                <el-form-item>
                    <div class="wode" id="wang"></div>
                </el-form-item>
                <el-form-item label="一周排课">
                    <br>
                    <el-date-picker
                            v-model="startTime"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                    至
                    <el-date-picker
                            v-model="endTime"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <paikebiao type="0" v-if="ids" :id="ids" :endTime="endTime" :startTime="startTime"></paikebiao>
                <addpaikebiao v-else @paikeselect="getpaikedata" :id="ids" :endTime="endTime"
                              :startTime="startTime"></addpaikebiao>
                <el-form-item>
                    <el-button @click="get" type="primary">确定</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import Wang from 'wangeditor'
    import {baseImgPath, basefile, fileupload, imgupload, videoupload} from '@/config/env.js';

    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import {formatDate} from '@/utils/utils'
    import paikebiao from '../../components/coach/paikebiao'
    import addpaikebiao from '../../components/coach/addpaikebiao'

    function getDay(day) {
        var today = new Date();
        var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
        today.setTime(targetday_milliseconds); //注意，这行是关键代码
        var tYear = today.getFullYear();
        var tMonth = today.getMonth();
        var tDate = today.getDate();
        tMonth = doHandleMonth(tMonth + 1);
        tDate = doHandleMonth(tDate);
        return tYear + "-" + tMonth + "-" + tDate;
    }

    function doHandleMonth(month) {
        var m = month;
        if (month.toString().length == 1) {
            m = "0" + month;
        }
        return m;
    }

    export default {
        components: {paikebiao, PlatformCrumb, addpaikebiao},

        data() {
            return {
                listdata: [],
                optionsKC: [],
                detailForm: {
                    "time": [],
                    "times": [],
                    "address": "",
                    "coachId": sessionStorage.getItem('statusId') ? parseInt(sessionStorage.getItem('statusId')) : 0,
                    "courseType": '',
                    "courseTypeName": "",
                    "doc": "",
                    "grouping": '',
                    "groupingName": "",
                    "id": 0,
                    "imgs": "",
                    "name": "",
                    "plan": "",
                    'video': ''
                },
                endTime: getDay(7),
                startTime: getDay(0),
                editor: null,
                times: [],
                imgupload: imgupload,
                videoupload: videoupload,
                fileupload: fileupload,
                paike: [],
                ids: this.$route.query.id ? this.$route.query.id : 0,
                optionsFZ: []
            }
        },

        computed: {
            id() {
                return this.$route.query.id
            }
        },

        methods: {
            ...mapActions('coachTraining', [
                'fetchSelectList',
                'addKeCheng',
                'EditKeCheng',
                'getKeCheng',
                'getPaike',
                'addPaike',

            ]),
            bcPicChange(file, fileList) {
                let lists = []

                fileList.forEach(item => {
                    lists.push(item.raw)
                })

                this.detailForm.bcPic = lists
                console.log(this.detailForm.bcPic)

            },
            getpaikedata(e) {
                console.log(e);
                this.detailForm.times = e
            },
            bcPicRemove(file, fileList) {
                this.detailForm.bcPic = fileList
                console.log(this.detailForm.bcPic)
            },
            handleAvatarSuccess(res, file) {
                this.detailForm.imgs = res.data.path
            },
            // 上传视频
            handleVideoSuccess(res, file) {
                this.detailForm.video = res.data.path;
                console.log(this.detailForm.video);
            },
            // 上传文件
            handleVideoSuccess2(res, file) {
                this.detailForm.plan = res.data.path;
            },
            getSelectKC() {
                this.fetchSelectList({type: 'CT'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.optionsKC = list || []
                    }
                })
            },
            getSelectFZ() {
                this.fetchSelectList({type: 'FZ'}).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.optionsFZ = list || []
                    }
                })
            },

            get() {
                if (this.ids == 0) {
                    this.add()
                } else {
                    this.edit()
                }
            },
            add() {
                this.detailForm.doc = this.editor.txt.html()
                this.detailForm.time = []
                console.log(this.detailForm);
                this.addKeCheng(this.detailForm).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '成功',
                            type: 'success'
                        })
                        // coach/index
                        this.$router.push({
                            path: '/coach/index',
                        })
                    }
                })
            },
            edit() {
                this.detailForm.doc = this.editor.txt.html()
                this.detailForm.times = []
                this.detailForm.time = []
                console.log(this.detailForm);
                this.EditKeCheng(this.detailForm).then(res => {
                    const {code} = res
                    if (code === 200) {
                        this.$message({
                            message: '成功',
                            type: 'success'
                        })
                        this.$router.push({
                            path: '/coach/onlyReadwodekecheng',
                            query: {
                                id: this.$route.query.id
                            }
                        })
                    }
                })
            },
        },

        created() {
            this.getSelectKC()
            this.getSelectFZ()
            if (this.id) {
                console.log(this.id)
                const id = this.id
                console.log(this.getKeCheng)
                this.getKeCheng({id}).then(res => {
                    const {code, data = null} = res
                    if (code === 200 && data) {
                        this.detailForm = data
                        this.editor.txt.html(this.detailForm.doc)
                    }

                })
            }
        },
        mounted() {
            this.editor = new Wang('#wang')
            this.editor.create()
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        },
    }
</script>

<style scoped>
    .table .title {
        display: flex;
    }

    .df {
        display: flex;
        background: none;
    }

    .liStyle {
        border: 1px solid;
        width: 120px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }

    .wode {
        position: relative;
        z-index: 1;
    }

    .uploadimg2 {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

    }

    .uploadimg2 img {
        margin-right: 20px;
    }

    .hezuohb {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .medium {
        padding: 20px;
        width: 1140px;
        margin: auto;
        background: #fff;
    }

    .page {
        margin: 0 auto;
        min-width: 1140px;
    }

    .coach-page {
        padding-top: 80px;
    }

    .coach-page .content {
        margin: 0 auto;
        width: 1140px;
        background-color: #fff;
        margin-bottom: 40px;
        margin-top: 12px;
    }

    .ml30 {
        margin-left: 30px;
    }

    .uploadimg2 img {
        max-width: 500px;
    }
</style>




